<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><?php echo $title;?></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../public/plugin/layui/css/layui.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header" style="padding-top:30px;"><?php echo $title;?></div>
          <div class="layui-card-body" pad15>
            <form method="post" class="layui-form" action='edit_info.php' enctype="multipart/form-data">

              <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                  <input type="text" name="name" value="<?php echo $row['name'];?>" readonly class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                  <input type="text" name="nickname" value="<?php echo $row['nickname'];?>" placeholder="请输入昵称" required class="layui-input">
                </div>
				 <div class="layui-form-mid layui-word-aux" id="nickname"></div>
              </div>
			  
              <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
				<?php if($row['sex'] == '男'):?>
                <div class="layui-input-block">
		
                  <input type="radio" name="sex" value="男" title="男" checked="checked">
                  <input type="radio" name="sex" value="女" title="女">
				 
                </div>
				<?php endif;?>
				<?php if($row['sex'] == '女'):?>
                <div class="layui-input-block">
		
                  <input type="radio" name="sex" value="男" title="男">
                  <input type="radio" name="sex" value="女" title="女" checked="checked">
				 
                </div>
				<?php endif;?>
              </div>
			  
              <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                  <input placeholder="图片地址" value="<?php echo DIR_IMG . $row['image'];?>" class="layui-input">
                </div>
                  <button class="layui-btn layui-btn-primary" id="img">查看图片</button >
              </div>
			  
			  <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-inline">
                   <input type="file" name="file" style="padding:8px;">
                </div>
              </div>
			  
              <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-inline">
                  <input type="text" name="tel"  placeholder="请输入手机号" value="<?php echo $row['tel'];?>" class="layui-input">
                </div>
				<div class="layui-form-mid layui-word-aux" id="tel"></div>
              </div>
			  
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" name="email" placeholder="请输入邮箱" value="<?php echo $row['email'];?>" class="layui-input">
                </div>
				<div class="layui-form-mid layui-word-aux" id="email"></div>
              </div>
			  
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                  <textarea name="remark" placeholder="请输入内容" class="layui-textarea"><?php echo $row['remark'];?></textarea>
				  <div class="layui-form-mid layui-word-aux">200个字符以内</div>
                </div> 
              </div>
			  
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" id="submit">确认修改</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="../../public/js/jquery.js"></script>
<script src="../../public/plugin/layui/layui.js"></script>
<script>
$(function(){
	$("#img").click(function(event){
		event.preventDefault();
		layer.open({
		  type: 1,
		  title:'头像',
		  closeBtn: 0, //不显示关闭按钮
		  anim: 2,
		  shadeClose: true, //开启遮罩关闭
		  content: '<img src="../../public/uploads/img/<?php echo $row["image"];?>" style="width:200px;height:200px;">'
		});
	});
	
	//验证昵称
	$("input[name='nickname']").blur(function(){
		var nickname = $("input[name='nickname']").val();
		if(nickname.length < 2 || nickname.length > 6){
			$("#nickname").html('<span style="color:red;height:38px;;letter-spacing:2px;" >2到6个字</span>');
			$("input[name='nickname']").val("");
			return false;
			
		}else{
			$("#nickname").text("");
		}
		
	});
	//验证手机号
	$("input[name='tel']").blur(function(){
		var tel = $("input[name='tel']").val();
		var phone = /^1[3|4|5|7|8][0-9]{9}$/;
		if(phone.test(tel)){
			$("#tel").text("");
		}else{
			
			$("#tel").html('<span style="color:red;height:38px;;letter-spacing:2px;" >手机号不正确</span>');
			$("input[name='tel']").val("");
			return false;
		}
		
	});
	//验证邮箱
	$("input[name='email']").blur(function(){
		var email = $("input[name='email']").val();
		//var e = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
		var e = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
		if(e.test(email)){
			$("#email").text("");
		}else{
			
			$("#email").html('<span style="color:red;height:38px;;letter-spacing:2px;" >邮箱不正确</span>');
			$("input[name='email']").val("");
			return false;
		}
		
	});
	
});
</script> 
<script>
layui.use('form', function(){
  var form = layui.form;
  
});

</script>
 
</body>
</html>